extends inc/main.pug
block variables

block css
	style(type="text/css").
		.interaction {
			width: 100%;
			padding: 50px 50px 0 50px;
			overflow: hidden;
		}
		.interaction > div {
			width: 48%;
			float: right;
		}
		.interaction > div:first-child {
			float: left;
		}
		.events div {
			border: 1px solid #ccc;
			padding: 10px;
			height: 150px;
			overflow: auto;
		}
		.events p {
			font-size: 9px;
			line-height: 13px;
			background: #333;
			margin: 0 0 1px 0;
			padding: 0 5px;
		}
		#slider1 {
			height: 394px;
			background: #000;
			border-radius: 4px;
			overflow: hidden;
		}
		
		/* responsive rules */
		@media (max-width: 713px) {
			#slider1 {
				height: auto; /* reset slider height to automatically fix with the first image height. */
				border-radius: 0;
			}
		}

block content
	.top
		.tv
			#slider1.jSlider
				- var val = 0
				while val++ < 7
					div: img(src="images/photo"+(val%6+1)+".jpg" alt="sample photo")
		.interaction
			.events
				h4 Event log
				div
			
			.ext-controls
				h4 External control
				ul
					li: a(href="#").stop Cancel autoplay!
					li: a(href="#").prev Go to previous slide
					li: a(href="#").next Go to next slide
					li: a(href="#").go3 Go to slide #3 (index: 2)
						br
						em (the first slide index is 0.)
			
block bottom-script
	script.
		(function($) {
			$('#slider1').on({
				
				/* fired when the slider is initialized successfully! */
				'slideCreated': function() {
					$('<p>Slider is created!</p>').appendTo('.events div');
					
					/* Stop autoplay */
					$('.stop').on('click', function(evt) {
						evt.preventDefault();
						$('#slider1').sliderStop();
					});
					
					/* Stop autoplay & go to previous slide */
					$('.prev').on('click', function(evt) {
						evt.preventDefault();
						$('#slider1').sliderStop().sliderGo(-1);
					});
					
					/* Stop autoplay & go to next slide */
					$('.next').on('click', function(evt) {
						evt.preventDefault();
						$('#slider1').sliderStop().sliderGo(1);
					});
					
					/* Stop autoplay & go to slide #3 */
					$('.go3').on('click', function(evt) {
						evt.preventDefault();
						$('#slider1').sliderStop().sliderUpdate(2);
					});
				}

				/* fired when starting moving to another slide */
				, 'slideStart': function() {
					$('<p>Start sliding</p>').appendTo('.events div');
				}


				/* fired when finish moving to another slide, return the current slide index */
				, 'slideComplete': function(evt) {
					$('<p>Slided to slide #' + ( evt.current + 1 ) + '</p>').appendTo('.events div');
				}

				/* fired when autoplay is canceled */
				, 'slideCancelAutoPlay': function(evt) {
					$('<p>Autoplay has been canceled!</p>').appendTo('.events div');
				}
			});
		})(jQuery);
